﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="/css/redmond/common.css" type="text/css" media="all" />
    <link rel="stylesheet" href="/css/redmond/jquery-ui-1.8.18.custom.css" type="text/css"
        media="all" />

    <script type="text/javascript" src="/scripts/jquery-1.7.1.min.js"></script>

    <script type="text/javascript" src="/scripts/jquery-ui-1.8.18.custom.min.js"></script>

    <script type="text/javascript" src="/scripts/common.js"></script>

</head>
<body style="font-size: 9pt;">
    <button id="Insert">
        新增</button>
    <button id="Update">
        修改</button>
    <button id="Delete">
        删除</button>
    <button id="MoveUp">
        上移</button>
    <button id="MoveDown">
        下移</button><br>
    <br>
    <table style="width: 900px; border-collapse: collapse; background-color: #d0e5f5;"
        class="single-border">
        <tr align="left" level="0" style="display: none;" id="TrTemplate">
            <td class="single-border">
                <input id="Radio7" name="R1" type="radio" value="V6" />
            </td>
            <td style="width: 300px; font-weight: bold;">
                <span name="BlankSpan"></span><span name="NameSpan">概念 6</span>
            </td>
            <td class="single-border" style="background-color: White;">
                得分
            </td>
            <td class="single-border" style="background-color: White;">
                总答题数
            </td>
            <td class="single-border" style="background-color: White;">
                答对题数
            </td>
            <td class="single-border" style="background-color: White;">
                答错题数
            </td>
            <td class="single-border" style="background-color: White;">
                未答题数
            </td>
            <td class="single-border" style="background-color: White;">
                结论
            </td>
            <td class="single-border" style="background-color: White;">
                相关概念
            </td>
            <td class="single-border" style="background-color: White;">
                相关公式
            </td>
        </tr>
        <tr class="table-body" align="center">
            <td class="single-border">
            </td>
            <td style="width: 300px;" class="single-border">
                概念
            </td>
            <td class="single-border">
                得分
            </td>
            <td class="single-border">
                总答题数
            </td>
            <td class="single-border">
                答对题数
            </td>
            <td class="single-border">
                答错题数
            </td>
            <td class="single-border">
                未答题数
            </td>
            <td class="single-border">
                结论
            </td>
            <td class="single-border">
                相关概念
            </td>
            <td class="single-border">
                相关公式
            </td>
        </tr>
        <tr align="left" level="0">
            <td class="single-border">
                <input id="Radio1" name="R1" type="radio" value="V1" />
            </td>
            <td style="width: 300px; font-weight: bold;">
                <span name="BlankSpan"></span>
                <button name="ExpandButton" style="font-size: 0pt;">
                    <span class="ui-icon ui-icon-minusthick"></span>
                </button>
                <span name="NameSpan">概念1</span>
            </td>
            <td class="single-border" style="background-color: White;">
                得分
            </td>
            <td class="single-border" style="background-color: White;">
                总答题数
            </td>
            <td class="single-border" style="background-color: White;">
                答对题数
            </td>
            <td class="single-border" style="background-color: White;">
                答错题数
            </td>
            <td class="single-border" style="background-color: White;">
                未答题数
            </td>
            <td class="single-border" style="background-color: White;">
                结论
            </td>
            <td class="single-border" style="background-color: White;">
                相关概念
            </td>
            <td class="single-border" style="background-color: White;">
                相关公式
            </td>
        </tr>
        <tr align="left" level="1">
            <td class="single-border">
                <input id="Radio5" name="R1" type="radio" value="V2" />
            </td>
            <td style="width: 300px; font-weight: bold;">
                <span name="BlankSpan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span name="NameSpan">概念 2</span>
            </td>
            <td class="single-border" style="background-color: White;">
                得分
            </td>
            <td class="single-border" style="background-color: White;">
                总答题数
            </td>
            <td class="single-border" style="background-color: White;">
                答对题数
            </td>
            <td class="single-border" style="background-color: White;">
                答错题数
            </td>
            <td class="single-border" style="background-color: White;">
                未答题数
            </td>
            <td class="single-border" style="background-color: White;">
                结论
            </td>
            <td class="single-border" style="background-color: White;">
                相关概念
            </td>
            <td class="single-border" style="background-color: White;">
                相关公式
            </td>
        </tr>
        <tr align="left" level="1">
            <td class="single-border">
                <input id="Radio2" name="R1" type="radio" value="V3" />
            </td>
            <td style="width: 300px; font-weight: bold;">
                <span name="BlankSpan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <button name="ExpandButton" style="font-size: 0pt;">
                    <span class="ui-icon ui-icon-minusthick"></span>
                </button>
                <span name="NameSpan">概念 3</span>
            </td>
            <td class="single-border" style="background-color: White;">
                得分
            </td>
            <td class="single-border" style="background-color: White;">
                总答题数
            </td>
            <td class="single-border" style="background-color: White;">
                答对题数
            </td>
            <td class="single-border" style="background-color: White;">
                答错题数
            </td>
            <td class="single-border" style="background-color: White;">
                未答题数
            </td>
            <td class="single-border" style="background-color: White;">
                结论
            </td>
            <td class="single-border" style="background-color: White;">
                相关概念
            </td>
            <td class="single-border" style="background-color: White;">
                相关公式
            </td>
        </tr>
        <tr align="left" level="2">
            <td class="single-border">
                <input id="Radio3" name="R1" type="radio" value="V4" />
            </td>
            <td style="width: 300px; font-weight: bold;">
                <span name="BlankSpan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span name="NameSpan">概念 4</span>
            </td>
            <td class="single-border" style="background-color: White;">
                得分
            </td>
            <td class="single-border" style="background-color: White;">
                总答题数
            </td>
            <td class="single-border" style="background-color: White;">
                答对题数
            </td>
            <td class="single-border" style="background-color: White;">
                答错题数
            </td>
            <td class="single-border" style="background-color: White;">
                未答题数
            </td>
            <td class="single-border" style="background-color: White;">
                结论
            </td>
            <td class="single-border" style="background-color: White;">
                相关概念
            </td>
            <td class="single-border" style="background-color: White;">
                相关公式
            </td>
        </tr>
        <tr align="left" level="1">
            <td class="single-border">
                <input id="Radio6" name="R1" type="radio" value="V5" />
            </td>
            <td style="width: 300px; font-weight: bold;">
                <span name="BlankSpan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span name="NameSpan">概念 5</span>
            </td>
            <td class="single-border" style="background-color: White;">
                得分
            </td>
            <td class="single-border" style="background-color: White;">
                总答题数
            </td>
            <td class="single-border" style="background-color: White;">
                答对题数
            </td>
            <td class="single-border" style="background-color: White;">
                答错题数
            </td>
            <td class="single-border" style="background-color: White;">
                未答题数
            </td>
            <td class="single-border" style="background-color: White;">
                结论
            </td>
            <td class="single-border" style="background-color: White;">
                相关概念
            </td>
            <td class="single-border" style="background-color: White;">
                相关公式
            </td>
        </tr>
        <tr align="left" level="0">
            <td class="single-border">
                <input id="Radio4" name="R1" type="radio" value="V6" />
            </td>
            <td style="width: 300px; font-weight: bold;">
                <span name="NameSpan">概念 6</span>
            </td>
            <td class="single-border" style="background-color: White;">
                得分
            </td>
            <td class="single-border" style="background-color: White;">
                总答题数
            </td>
            <td class="single-border" style="background-color: White;">
                答对题数
            </td>
            <td class="single-border" style="background-color: White;">
                答错题数
            </td>
            <td class="single-border" style="background-color: White;">
                未答题数
            </td>
            <td class="single-border" style="background-color: White;">
                结论
            </td>
            <td class="single-border" style="background-color: White;">
                相关概念
            </td>
            <td class="single-border" style="background-color: White;">
                相关公式
            </td>
        </tr>
    </table>
    <div style="display: none;">
        <button name="ExpandButton" style="font-size: 0pt;" id="ExpandButtonTemplate">
            <span class="ui-icon ui-icon-minusthick"></span>
        </button>
    </div>

    <script language="javascript">
        $(function event() {
            //Init

            $("button").button();
            $("#Update").click(function() {
                var $ele = $("input:radio[name='R1']:checked");
                if ($ele.length == 0) {
                    Alert("请选择要操作的节点！");
                    return;
                }
                var name = prompt("请输入新结点的名称！", "");
                if (name == null)
                    return;
                if ($.trim(name) == "") {
                    Alert("结点的新名称为空！");
                    return;
                }
                var $tr = $ele.parents("tr:first");
                var $td = $tr.find("td:nth-child(2)");
                $td.find("span[name='NameSpan']").text($.trim(name));
            });
            $("#Insert").click(function() {
                var $ele = $("input:radio[name='R1']:checked");
                if ($ele.length == 0) {
                    Alert("请选择要操作的节点！");
                    return;
                }
                var name = prompt("请输入新结点的名称！", "");
                if (name == null)
                    return;
                if ($.trim(name) == "") {
                    Alert("新结点的名称为空！");
                    return;
                }
                var $tr = $ele.parents("tr:first");
                var level = $tr.attr("level");
                var $new = $("#TrTemplate").clone(true).removeAttr("id").attr("level", parseInt(level) + 1);
                var blank = "";
                for (var i = 0; i < parseInt(level) + 1; i++)
                    blank += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                var $td = $new.find("td:nth-child(2)");
                $td.find("span[name='BlankSpan']").html(blank);
                $td.find("span[name='NameSpan']").text($.trim(name));
                $new.css("display", "").insertAfter($tr);
                if ($tr.find(".ui-icon-plusthick, .ui-icon-minusthick").length == 0) {
                    $("#ExpandButtonTemplate").clone(true).removeAttr("id").insertAfter($tr.find("span[name='BlankSpan']"));
                }
            });
            $("#Delete").click(function() {
                if (!confirm("你确定要删除该结点么？"))
                    return;
                var $ele = $("input:radio[name='R1']:checked");
                if ($ele.length == 0) {
                    Alert("请选择要操作的节点！");
                    return;
                }
                var $tr = $ele.parents("tr:first");
                var trlevel = parseInt($tr.attr("level"));
                var $prev = $tr.prev();
                if ($prev.attr("class") && $prev.attr("class") == "table-body") {
                    Alert("根节点不允许被删除！");
                    return;
                }
                var $next = $tr.next();
                if ($next.length > 0 && parseInt($next.attr("level")) > trlevel) {
                    Alert("请先删除该节点的子节点！");
                    return;
                }
                if ((parseInt($next.attr("level")) != trlevel) && (parseInt($prev.attr("level")) != trlevel)) {
                    $prev.find("button[name='ExpandButton']").remove();
                }
                $tr.remove();
            });
            $("button[name='ExpandButton']").click(function() {
                var $tr = $(this).parents("tr:first");
                var level = $tr.attr("level");
                var $trs = new Array();
                $tr = $tr.next();
                while ($tr.length != 0 && parseInt($tr.attr("level")) > level) {
                    $trs[$trs.length] = $tr;
                    $tr = $tr.next();
                }
                var $child = $(this).find(".ui-icon-plusthick, .ui-icon-minusthick");
                if ($child.hasClass("ui-icon-plusthick")) {
                    $child.removeClass("ui-icon-plusthick").addClass("ui-icon-minusthick");
                    for (var i = 0; i < $trs.length; i++) {
                        $trs[i].css("display", "");
                        var $ele = $trs[i].find(".ui-icon-plusthick");
                        if ($ele.length != 0)
                            $ele.removeClass("ui-icon-plusthick").addClass("ui-icon-minusthick");
                    }
                }
                else {
                    $child.removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick");
                    for (var i = 0; i < $trs.length; i++)
                        $trs[i].css("display", "none");

                }
            });
            $("#MoveUp").click(function() {
                var $ele = $("input:radio[name='R1']:checked");
                if ($ele.length == 0) {
                    Alert("请选择要操作的节点！");
                    return;
                }
                var $tr = $ele.parents("tr:first");
                var level = $tr.attr("level");
                var $trs = new Array();
                $trs[$trs.length] = $tr;
                var $next = $tr.next();
                while ($next.length > 0 && parseInt($next.attr("level")) > level) {
                    $trs[$trs.length] = $next;
                    $next = $next.next();
                }
                var $prev = $tr.prev();
                while ($prev.length > 0 && parseInt($prev.attr("level")) > level) {
                    $prev = $prev.prev();
                }
                if (parseInt($prev.attr("level")) == level) {
                    for (var i = 0; i < $trs.length; i++) {
                        $trs[i].insertBefore($prev);
                    }
                }
            });
            $("#MoveDown").click(function() {
                var $ele = $("input:radio[name='R1']:checked");
                if ($ele.length == 0) {
                    Alert("请选择要操作的节点！");
                    return;
                }
                var $tr = $ele.parents("tr:first");
                var level = $tr.attr("level");
                var $trs = new Array();
                $trs[$trs.length] = $tr;
                var $next = $tr.next();
                while ($next.length > 0 && parseInt($next.attr("level")) > level) {
                    $trs[$trs.length] = $next;
                    $next = $next.next();
                }
                var $nextprev = $next;
                var $next = $next.next();
                while ($next.length > 0 && parseInt($next.attr("level")) > level) {
                    $nextprev = $next;
                    $next = $next.next();
                }
                if (parseInt($nextprev.attr("level")) >= level) {
                    for (var i = $trs.length - 1; i >= 0; i--) {
                        $trs[i].insertAfter($nextprev);
                    }
                }
            });
        });
    </script>

</body>
</html>
